<template>
	<view class="page">
		<u-tabs ref="tabs" name="value" :current="tabsCurrent" :list="list" @change="tabsChange"></u-tabs>
		<!-- 查询 -->
		<search placeholder="运单号" ref="search" @search="search()"></search>
		<u-card :show-head="false" padding="10" :border="false" margin="20rpx 0" border-radius="0"
			:foot-border-top="false" v-for="(item,index) in demandList" :key="index" @click="view(item.id)">
			<view class="" slot="body">
				<view class="u-body-item">
					<view class="item">
						<view class="title">运单号:</view>
						<view class="info">{{item.transportNo}}</view>
					</view>
					<u-icon @click.stop="abnormalReport(item)" name="warning-fill" size="42" color="red"></u-icon>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">货运订单:</view>
						<view class="info">{{item.orderNo}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">交货单:</view>
						<view class="info">{{item.deliverNo}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">司机:</view>
						<view class="info">{{item.driverName}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">车牌号:</view>
						<view class="info">{{item.carNo}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">挂车号:</view>
						<view class="info">{{item.bindCarNo}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">计划提货日期:</view>
						<view class="info">{{item.planGetGoodsDateStart}}</view>
					</view>
				</view>
				<view class="u-body-item">
					<view class="item">
						<view class="title">计划收货日期:</view>
						<view class="info">{{item.planGetGoodsDateEnd}}</view>
					</view>
				</view>
			</view>
			<view class="u-footer" slot="foot">
				<u-button type="primary" @click="view(item.id)" :custom-style="customStyle" plain size="medium">
					详情
				</u-button>
				<u-button v-if="item.orderType === 'ZFO5' || item.orderType === 'ZFOB'" type="primary"
					@click="completion(item.id)" :custom-style="customStyle" plain size="medium">
					补充信息
				</u-button>
				<u-button
					v-if="(item.transportStatus === 'orderReceived' || item.transportStatus === 'loaded')&&userInfo.role_name==='carrier'"
					type="primary" @click="distribution(item)" :custom-style="customStyle" plain size="medium">修改运单
				</u-button>
				<u-button type="primary" v-if="item.transportStatus === 'orderReceived'" @click="edit(item.id,'到达提货点')"
					:custom-style="customStyle" plain size="medium">
					到达提货点
				</u-button>
				<u-button type="primary" v-if="item.transportStatus === 'loaded'" @click="edit(item.id,'启运')"
					:custom-style="customStyle" plain size="medium">启运
				</u-button>
				<u-button type="primary" v-if="item.transportStatus === 'arriveAtTheTransferStation'"
					@click="edit(item.id,'到达中转站')" :custom-style="customStyle" plain size="medium">到达中转站
				</u-button>
				<u-button type="primary" v-if="item.transportStatus === 'shipped'" @click="edit(item.id,'运达')"
					:custom-style="customStyle" plain size="medium">
					运达
				</u-button>
				<u-button type="primary" v-if="item.transportStatus === 'arrived' && item.orderType === 'ZFO6'"
					@click="edit(item.id,'卸货')" :custom-style="customStyle" plain size="medium">卸货
				</u-button>
				<u-button type="primary" v-if="item.transportStatus === 'arrived' && item.orderType !== 'ZFO6'"
					@click="sign(item.id)" :custom-style="customStyle" plain size="medium">签收
				</u-button>
			</view>
		</u-card>
		<u-loadmore :status="loadmoreStatus" :load-text="loadText" @loadmore="clickLoadmore" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Search from '../../components/Search.vue';
	export default {
		data() {
			return {
				list: [{
					"key": "orderReceived",
					"value": "已接单"
				}, {
					"key": "loaded",
					"value": "待启运"
				}, {
					"key": "arriveAtTheTransferStation",
					"value": "待到达中转站"
				}, {
					"key": "shipped",
					"value": "待送达"
				}, {
					"key": "arrived",
					"value": "待完成"
				}, {
					"key": "completed",
					"value": "已完成"
				}],
				demandList: [],
				searchId: '',
				tabsCurrent: 0,
				current: 1, //当前页
				size: 10, //每页数量
				loadmoreStatus: 'loadmore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '正在加载',
					nomore: '没有更多了'
				},
				customStyle: {
					marginLeft: '20rpx',
				},
			}
		},
		components: {
			Search,
		},
		onShow() {
			this.size = 10
			this.current = 1
			this.demandList = []
			this.searchId = ""
			this.$refs.search.reset()
			this.getList()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.size = 10
			this.current = 1
			this.demandList = []
			this.searchId = ""
			this.$refs.search.reset()
			this.getList()
			uni.stopPullDownRefresh();

		},
		//上拉加载
		onReachBottom() {
			if (this.size === 10) {
				this.current += 1
				this.getList()
			} else {
				this.loadmoreStatus = 'nomore'
			}
		},
		methods: {
			//切换
			tabsChange(index) {
				this.tabsCurrent = index
				this.size = 10
				this.current = 1
				this.demandList = []
				this.searchId = ""
				this.$refs.search.reset()
				this.getList()
			},
			//点击加在更多
			clickLoadmore() {
				if (this.size === 10) {
					this.current += 1
					this.getList()
				} else {
					this.loadmoreStatus = 'nomore'
				}
			},
			//获取数据列表
			getList() {
				this.loadmoreStatus = 'loading'
				this.$u.api.carrier.getTransportorder({
					current: this.current,
					size: this.size,
					transportStatus: this.list[this.tabsCurrent].key,
					transportNo: this.searchId
				}).then(data => {
					if (data.code === 200 && data.success) {
						this.size = data.data.records.length
						if (this.size < 10) {
							this.loadmoreStatus = 'nomore'
						} else {
							this.loadmoreStatus = 'loadmore'
						}
						this.demandList = this.demandList.concat(data.data.records)
					}
				}).catch(() => {
					this.loadmoreStatus = 'loadmore'
				})
			},
			// 查询
			search(val) {
				this.current = 1
				this.size = 10
				this.demandList = []
				this.searchId = val || ""
				this.getList()
			},
			//编辑状态
			edit(id, operating) {
				uni.showModal({
					title: `是否确定${operating}?`,
					success: (res) => {
						if (res.confirm) {
							this.$u.api.carrier.waybillStatusChange({
								id: id,
								operating: operating
							}).then(data => {
								if (data.code === 200 && data.success) {
									this.$refs.uToast.show({
										title: data.msg,
										type: 'success',
										duration: 1000
									})
									this.search()
								}
							}).catch(() => {
								uni.hideLoading()
							})
						}
					}
				})
			},
			//异常汇报
			abnormalReport(item) {
				uni.navigateTo({
					url: `./abnormalReport?id=${item.id}&orderType=transport&orderStatus=${item.transportStatus}`
				})
			},
			//签收
			sign(id) {
				uni.navigateTo({
					url: `./sign?id=${id}`
				})
			},
			//修改运单
			distribution(item) {
				uni.navigateTo({
					url: `./assignWaybill?id=${item.demandId}&tmId=${item.carrierNo}&orderType=${item.orderType}&type=edit&transportId=${item.id}`
				})
			},
			//查看详情
			view(id) {
				uni.navigateTo({
					url: `./transportDetail?id=${id}`
				})
			},
			//补充信息
			completion(id) {
				uni.navigateTo({
					url: `./transportCompletionInfo?transportId=${id}`
				})
			},
		}
	}
</script>

<style lang="less">
	.page {
		min-height: 100vh;
		width: 750rpx;
		background-color: #f9f9f9;

		.u-body-item {
			font-size: 28rpx;
			color: #999999;
			width: 100%;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				.title {
					width: 200rpx;
				}

				.info {
					width: 425rpx;
					color: #333333;
					word-break: break-all;
				}
			}
		}

		.u-footer {
			display: flex;
			justify-content: flex-end;

			button {
				padding: 0 40rpx;
			}
		}
	}
</style>
